<template>
  <div class="body">
    <div class="content">
      <div class="InputField">
        <h2>藏头诗生成</h2>
        <p>藏头诗是诗歌中一种特殊形式的诗体，藏头诗涵义深、品位高、价值重，可谓一字千金。只要您输入你想要的文字，并点击"开始生成"，就可以生成属于您的藏头诗。</p>
        <form @submit.prevent>
          <label for="search" class="SearchText">你想搜索什么:&nbsp;&nbsp;</label>
          <input class="SearchBox" placeholder="请输入关键字" type="text" v-model="keyWords"/>&nbsp;&nbsp;
          <button class="Search" @click="sendKeyWord">开始生成</button>
        </form>
      </div>
      <div class="DisplayBox">
        <div class="Title1">{{ keyWords }}</div>
        <div id="Show">
          <div class="Show first-one" v-html="poems[0]" v-if="!poem1"></div>
          <div class="Show" v-html="poems[1]" v-if="!poem2"></div>
          <div class="Show" v-html="poems[2]" v-if="!poem3"></div>

        </div>
        <div v-if="buttonBol">
          <button class="Choose" @click="typing1" >选择</button>
          <button class="Choose1" @click="typing2" >选择</button>
          <button class="Choose" @click="typing3">选择</button>
        </div>
        <button class="Choose1" @click="reselect"  v-if="!buttonBol">重新选择</button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import axios from 'axios'
  import { ElMessageBox } from 'element-plus'
  import { ref, onMounted } from "vue";
  import qs from "qs";
  import {throttle} from "../apis/throttle.js";

  let keyWords = ref("藏头诗");
  let poems = ref([`藏于笥箧重于师<br>头管一声天外起<br>诗人浪作水仙歌`, `藏春坞里莺花闹<br>头如镰杓尾如凿<br>诗罢能吟不复听`, `藏春坞里莺花闹<br>头痛涔涔齿动摇<br>诗听越客吟何苦`]);
  let poem1 = ref(false);
  let poem2 = ref(false);
  let poem3 = ref(false);
  let buttonBol = ref(true);
  let i = 0;
  let f=0;
  let data = ref([]);
  const strToArr = str => str.split('');

  function typing1(){
    poem1.value = false;
    poem2.value = true;
    poem3.value = true;
    buttonBol.value = false;
    if (i === 0) {
      data = strToArr(poems.value[0]);
      poems.value[0] = "";
    }
    poems.value[0] += data[i];
    i++;
    let typingTimer = setTimeout(typing1, 120);
    if (i >= data.length) {
      clearTimeout(typingTimer);
    }
  }
  function typing2(){
    poem1.value = true;
    poem2.value = false;
    poem3.value = true;
    buttonBol.value = false;
    if (i === 0) {
      data = strToArr(poems.value[1]);
      poems.value[1] = "";
    }
    poems.value[1] += data[i];
    i++;
    let typingTimer = setTimeout(typing2, 220);
    if (i >= data.length) {
      clearTimeout(typingTimer);
    }

  }
  function typing3(){
    poem1.value = true;
    poem2.value = true;
    poem3.value = false;
    buttonBol.value = false;
    if (i === 0) {
      data = strToArr(poems.value[2]);
      poems.value[2] = "";
    }
    poems.value[2] += data[i];
    i++;
    let typingTimer = setTimeout(typing3, 120);
    if (i >= data.length) {
      clearTimeout(typingTimer);
    }

  }
  function reselect(){
    poem1.value = false;
    poem2.value = false;
    poem3.value = false;
    buttonBol.value = !buttonBol.value;
    i=0;
  }

  /*let index = 0;
  let charIndex = 0;
  let delta = 500;
  let start = null;
  let isDeleting = false;
  function type(time) {
    window.requestAnimationFrame(type);
    if (!start) start = time;
    let progress = time - start;
    if (progress > delta) {
      let text = texts[index];
      if (!isDeleting) {
        textEl.innerHTML = text.slice(
            0,
            ++charIndex
        );
        delta = 500 - Math.random() * 400;
      } else {
        textEl.innerHTML = text.slice(
            0,
            charIndex--
        );
      }

      start = time;

      if (charIndex === text.length) {
        isDeleting = true;
        delta = 200;
        start = time + 1200;
      }

      if (charIndex < 0) {
        isDeleting = false;
        start = time + 200;
        index = ++index % texts.length;
      }
    }
  }
  window.requestAnimationFrame(type);*/



  function poetrySearch(){
    if(keyWords.value === ""){
      ElMessageBox.alert('请输入关键词','提示');
    }else{
      axios.post("/search/acrostic/query/#", qs.stringify({
        "keyword": keyWords.value,
      }))
          .then((response) => {
            let data = response.data;
            if (data.status === true) {
              console.log(response);
              poems.value = data.data;
              ElMessageBox.alert('生成成功！', '提示');
            } else {
              ElMessageBox.alert('该关键词未查询到相应的藏头诗', '提示');
            }
            console.log(response);
          })
          .catch((err) => {
            console.log(err);
            ElMessageBox.alert('网络错误，请检查网络连接后重试', '发送失败');
          })
    }
  }

  let sendKeyWord = throttle(poetrySearch, 2500);
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  font-family: Arial, "Microsoft YaHei UI", sans-serif;
}

.body {
  background-color: #f8f9fa;
  width: 100%;
  height: 100%;
  position: fixed;
  color: #212121;
}

.content {
  z-index: 2;
  width: 1000px;
  height: calc(81% - 2px);
  position: fixed;
  left: 500px;
  border-left: #867660 solid 5px;
  border-right: #867660 solid 5px;
}

.InputField {
  position: absolute;
  left: 100px;
  top: 50px;
  width: 800px;
  height: 160px;
  border-top: #867660 solid 2px;
  border-bottom: #867660 solid 2px;
  padding: 10px;
}

.InputField p {
  text-indent: 2em;
  font-size: 20px;
}

.DisplayBox {
  position: absolute;
  top: 300px;
  width: 1000px;
  height: 300px;
  text-align: center;
}

.Search {
  background: linear-gradient(
      89.93deg,
      #a2ab7e 0.06%,
      #8fb214 105.68%
  );
  width: 100px;
  padding: 12px 0;
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: bold;
}

.SearchBox {
  padding-left: 8px;
  border-radius: 30px;
  width: 300px;
  height: 30px;
}

.SearchText {
  font-weight: bold;
  font-size: 20px;
}

.Title1 {
  font-size: 50px;
  font-weight: bold;

}

#Show {
  display: flex;
  justify-content: center;
}

.Show {
  margin: 50px;
  font-size: 30px;
}

.Choose {
  margin-left: 50px;
  margin-right: 50px;
  background: linear-gradient(
      89.93deg,
      #a2ab7e 0.06%,
      #8fb214 105.68%
  );
  width: 150px;
  padding: 12px 0;
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: bold;
}

.Choose1 {
  margin-left: 100px;
  margin-right: 100px;
  background: linear-gradient(
      89.93deg,
      #a2ab7e 0.06%,
      #8fb214 105.68%
  );
  width: 150px;
  padding: 12px 0;
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: bold;
}

/*span.mark {
  height: 30px;
  border-right: 1px solid #000000;
  animation: blink 0.6s step-end infinite;
}

@keyframes blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #000000;
  }
}*/

</style>